<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>旭日图 - 高亮相关扇形块</title>
    <!-- 引入 echarts.js -->
    <script src="cjj/echarts.js"></script>
    <!--<script src="cjj/jq.js"></script>-->
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">


var myChart = echarts.init(document.getElementById('main'));

var option = {
    series: {
        type: 'sunburst',
		/*当鼠标移动到一个扇形块时，可以高亮相关的扇形块。
		如果其值为 'descendant'，则会高亮该扇形块和后代元素，其他元素将被淡化（downplay，参见 itemStyle）；
		如果其值为 'ancestor'，则会高亮该扇形块和祖先元素；如果其值为 'self' 则只高亮自身；'none' 则不会淡化其他元素。*/
		highlightPolicy:'ancestor',
        data: [
        	{
	            name: 'A',
	            value: 10,
	            children: [{
	                value: 3,
	                name: 'Aa'
	            }, {
	                value: 5,
	                name: 'Ab',
	                children:[{
	                	name:'Aba',
	                	value:3
	                }]
	            }]
	        }, {
	            name: 'B',
	            children: [{
	            	
	                name: 'Ba',
	                value: 4
	            }, {
	                name: 'Bb',
	                value: 2
	            }]
	        }, {
	            name: 'C',
	            value: 3
	        }
	    ],
	    itemStyle: {
		    color: '#aaa',
		    borderWidth: 2
		},
		emphasis: {
		    itemStyle: {
		        color: 'red'
		    }
		},
		highlight: {
		    itemStyle: {
		        color: 'orange'
		    }
		},
		downplay: {
		    itemStyle: {
		        color: '#ccc'
		    }
		}
    }
};

myChart.setOption(option);


</script>
</body>
</html>